<template>
    <div class="rich-table-container">
        <!-- <p class="info-text">
            <span class="ivu-row-color-danger">重复数据<i class="text"></i></span>
            <span class="m-l-md ivu-row-color-red">未通过审核<i class="text"></i></span>
            <span class="m-l-md ivu-row-color-yellow">缺席<i class="text"></i></span>
            <span class="m-l-md ivu-row-color-green">参会<i class="text"></i></span>
        </p> -->
        <i-table
                class="rich-table color-bordered-table base-bordered-table"
                :class="{'rich-table-no':!pData.length}"
                border
                :row-class-name="rowClassName"
                :columns="cColumns"

                @on-selection-change='selectChange'
                :data="pData"></i-table><!--:height="tHeight"-->
    </div>
</template>
<script>
    import { mapGetters, mapActions } from 'vuex'
    /*let mouse_state = false,mouse_x=0;
    const mousedownChange = (e)=>{
        mouse_state = true;
        mouse_x = e.pageX;
    };
    const mouseupChange = (e)=>{
        mouse_state = false;
    };
    const mousemoveChange = (e)=>{
        if(mouse_state){
            let move_x = e.pageX - mouse_x;
            if(move_x>300||move_x<-300){
                if(move_x<0){move_x = 0}
                $('.ivu-table-body').scrollLeft(move_x*5);
            }
        }
    };*/
    export default {
        props:{
          pData:{
              type:Array,
              default:()=>([])
          },
          pSelect:{
              type:Boolean,
              default:false
          },
          pStatus:{
              type:String,
              default:'people_status'
          },
          pEdit:{
              type:Boolean,
              default:true
          },
          pLineClass:{
              type:Function,
          },
          pPlusCallback:Function,
        },
        name: "RichTable",
        data(){
            return {
                tableColumnsChecked:[],
                tableColumns:[],
                cColumns:[],
                tHeight:0
            }
        },
        computed:{
            ...mapGetters({
                thead: 'customer_thead' ,
            }),

        },
        mounted(){
            this.init()
        },
        methods:{
            rowClassName (row, index) {
                // "-3", name: "待审核"
                //"-2", name: "未通过审核"
                //"-1", name: "缺席"
                //"1", name: "参会"
                if (row.status === '-2') {
                    return 'ivu-row-color-red';
                } else if (row.status === '-1') {
                    return 'ivu-row-color-yellow';
                } else if (row.status === '1') {
                    return 'ivu-row-color-green';
                }
                if(this.pLineClass){
                    //['red','yellow','green','danger']
                    let a=this.pLineClass&&this.pLineClass(row, index);
                    if(a){
                        return 'ivu-row-color-'+a;
                    }
                }
                return '';
            },
            headInit(update){
                let c = [],obj;
                let c_j ={};
                if(update){
                    this.tableColumnsChecked.forEach((v)=>{c_j[v] = true});
                }
                //选择
                /*
                    通过给 columns 数据设置一项，指定 type: 'selection'，即可自动开启多选功能。
                    给 data 项设置特殊 key _checked: true 可以默认选中当前项。
                    给 data 项设置特殊 key _disabled: true 可以禁止选择当前项。
                    正确使用好以下事件，可以达到需要的效果：
                    @on-select，选中某一项触发，返回值为 selection 和 row，分别为已选项和刚选择的项。
                    @on-select-all，点击全选时触发，返回值为 selection，已选项。
                    @on-selection-change，只要选中项发生变化时就会触发，返回值为 selection，已选项。
                */
                if(this.pSelect){
                    c.push({
                        type: 'selection',
                        width: 53,
                        fixed: 'left',
                        _no_toggle:true
                    })
                }

                this.thead.forEach((v,i)=>{
                    obj = {
                        title:v.title,
                        key:v.key,
                        width:85
                    };
                    if(v.key=='name'){
                        obj.fixed='left';
                        obj.width=100;
                        obj._no_toggle=true;
                        /*if(this.$scopedSlots.select){
                            obj.render = (h, params) => {
                                return (
                                    <div>{this.$scopedSlots.select({item:params.row})}{params.row.name}</div>
                                )
                            }
                        }*/
                    }
                    //对接洽谈事物(备注)
                    if(v.key=='comment'){
                        obj.width=230;
                    }
                    //状态
                    if(v.key=='status'){
                        obj.width=100;
                        obj.render= (h, params) => {
                            let name = this.pStatus;
                            return (
                                <status-label p-data={params.row.status} p-name={name} p-far={true}></status-label>
                            )
                        };
                    }

                    if(update){
                        if(c_j[obj.key]||obj._no_toggle){
                            c.push(obj);
                        }
                        return false
                    }
                    c.push(obj);
                });
                if(this.pPlusCallback&& typeof this.pPlusCallback == 'function'){
                    let a = this.pPlusCallback();
                    if(a.length>0){
                        c = c.concat(a)
                    }
                }
                //编辑
                if(this.pEdit){
                    obj = {/*TODO 按需显示列*/
                        renderHeader: (h, params) => {
                            return (<div>
                                编辑
                                {
                                    /*<i-poptip transfer={true} placement="bottom-end"><i-button><i className="fa fa-minus-circle m-l-sm cur-pointer"></i></i-button>

                                    <div className="api" slot="content">
                                        <i-checkbox-group value={this.tableColumnsChecked}
                                                          onInput={(v) => {
                                                              this.tableColumnsChecked = v;
                                                              this.changeTableColumns(v)
                                                          }}>
                                            {this.tableColumns.map(item => (<div>
                                                <i-checkbox label={item.key}>{item.name}</i-checkbox>
                                            </div>))}
                                        </i-checkbox-group>
                                    </div>
                                </i-poptip>*/
                                }
                            </div>)
                        },
                        width:130,
                        fixed:'right',
                        _no_toggle:true,
                        render: (h, params) => {
                            return this.$scopedSlots.eidt({item:params.row})
                        }
                    };
                    c.push(obj);
                }
                return c;
            },
            init(){
                let c_c = [],c_k = [];
                // let t_h = $('body').height() - $(this.$el).find('.rich-table').offset().top - 80;
                // this.$set(this,'tHeight',t_h);
                this.$set(this,'cColumns',this.headInit());
                this.cColumns.forEach((v,i)=>{
                    if(!v._no_toggle){
                        c_c.push({key:v.key,name:v.title});
                        c_k.push(v.key)
                    }
                });
                this.$set(this,'tableColumns',c_c);
                this.$set(this,'tableColumnsChecked',c_k);

                /*this.$nextTick(()=>{
                    $('.ivu-table-body').on('mouseenter',mouseenterChange);
                    $('.ivu-table-body').on('mouseleave',mouseleaveChange);
                })*/
            },
            selectChange(selection,row){
                let a = [];
                selection.forEach((v,i)=>{
                    a.push(v.id)
                });
                this.$emit('on-select',a)
            },
            changeTableColumns(values){
                this.$set(this,'cColumns',this.headInit(true));
            }
        },
        watch:{
            /*pData(){
               $(this.$el).find('.ivu-table-body').scrollTop(0);
            }*/
        }
    }
</script>
<style lang="scss">
    .rich-table-container{
        .info-text{
            .text{
                width: 15px;
                height: 15px;
                display: inline-block;
                vertical-align: sub;
                margin-left: 5px;
            }
        }
        .ivu-row-color-red{
            td,.text{
                background-color: rgb(255, 204, 198);
            }
        }
        .ivu-row-color-green{
            td,.text{
                background-color: rgb(218, 247, 223);
            }
        }
        .ivu-row-color-yellow{
            td,.text{
                background-color: rgb(248, 249, 192);
            }
        }
        .ivu-row-color-danger{
            td,.text{
                background-color: rgb(217, 170, 249);
            }
        }
    }
    .rich-table{
        &.rich-table-no tbody{
            display: none;
        }
        label{
            margin-bottom: 0;
        }
        .ivu-table-cell{
            padding-left: 5px;
            padding-right: 5px;
        }
        tr.ivu-table-row-hover td {
            background-color: #ebf7ff;
        }
    }
</style>